<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章详情</title>

    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 20px;
            background-color: #f4f4f9;
            color: #333;
        }
        h1, h2 {
            color: #0056b3;
        }
        p {
            line-height: 1.6;
            text-align: justify;
            text-justify: inter-word;
            margin-bottom: 20px;
        }
        .container {
            width: 80%;
            margin: auto;
            padding: 20px;
            background-color: white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
    </style>


</head>
<body>


<div class="container">
    <h1>文章详情</h1>
    <h2 id="title"></h2>
    <p id="summary"></p>  <!-- 添加一个新段落用于显示摘要 -->
    <div id="content"></div>  <!-- 用div代替p以支持多个段落 -->
</div>


<!--<script>-->

<!--    document.addEventListener("DOMContentLoaded", function() {-->
<!--        const params = new URLSearchParams(window.location.search);-->
<!--        const postId = params.get('postId'); // 从URL中获取文章ID-->

<!--        if (postId) {-->
<!--            fetch(`http://localhost:8087/api/posts/${postId}`)-->
<!--                .then(response => response.json())-->
<!--                .then(post => {-->
<!--                    document.getElementById('title').textContent = post.title;-->
<!--                    document.getElementById('summary').textContent = post.summary || '无摘要';-->

<!--                    // 将内容分段显示，尤其处理带有编号的部分-->
<!--                    const contentText = post.content;-->
<!--                    // 这里的正则表达式尝试匹配句号、问号、感叹号后跟空格，或者数字后跟点和空格-->
<!--                    const paragraphs = contentText.split(/(?<=[.?!])\s+|(?<=\d\.)\s+/);-->
<!--                    const contentDiv = document.getElementById('content');-->
<!--                    paragraphs.forEach(p => {-->
<!--                        const para = document.createElement('p');-->
<!--                        para.textContent = p;-->
<!--                        contentDiv.appendChild(para);-->
<!--                    });-->
<!--                })-->
<!--                .catch(error => console.error('Error loading post:', error));-->
<!--        } else {-->
<!--            document.getElementById('title').textContent = '文章未找到';-->
<!--            document.getElementById('summary').textContent = '';-->
<!--            document.getElementById('content').textContent = '指定的文章ID没有对应的文章。';-->
<!--        }-->
<!--    });-->



<!--</script>-->


<script>
    document.addEventListener("DOMContentLoaded", function() {
        const params = new URLSearchParams(window.location.search);
        const postId = params.get('postId'); // 从URL中获取文章ID

        if (postId) {
            fetch(`http://localhost:8087/api/posts/${postId}`)
                .then(response => response.json())
                .then(post => {
                    document.getElementById('title').textContent = post.title;
                    document.getElementById('summary').textContent = post.summary || '无摘要';

                    // 将内容分段显示，处理带有中文编号的部分
                    const contentText = post.content;
                    // 正则表达式在中文数字章节标记之前进行分割
                    const paragraphs = contentText.split(/(?=(一、|二、|三、|四、|五、|六、|七、|八、|九、|十、))/);
                    const contentDiv = document.getElementById('content');
                    paragraphs.forEach(p => {
                        const para = document.createElement('p');
                        para.textContent = p;
                        contentDiv.appendChild(para);
                    });
                })
                .catch(error => console.error('Error loading post:', error));
        } else {
            document.getElementById('title').textContent = '文章未找到';
            document.getElementById('summary').textContent = '';
            document.getElementById('content').textContent = '指定的文章ID没有对应的文章。';
        }
    });
</script>


</body>
</html>
